/**
 * 全局SCSS变量
 * 这些变量可以在整个项目中使用，用于保持样式的一致性
 */

/* ===== 主题颜色 ===== */
// 主色调，用于主要按钮、链接和强调元素
$primary-color: #ff2442;
// 主色调的亮色版本，用于悬停状态
$primary-color-light: #ff6b6b;
// 主色调的暗色版本，用于激活状态
$primary-color-dark: #cc1d36;

/* ===== 文字颜色 ===== */
// 主要文字颜色，用于标题和重要内容
$text-color-primary: #333333;
// 常规文字颜色，用于正文内容
$text-color-regular: #666666;
// 次要文字颜色，用于辅助、说明文字
$text-color-secondary: #999999;
// 占位符文字颜色，用于输入框占位符等
$text-color-placeholder: #cccccc;

/* ===== 背景颜色 ===== */
// 全局背景色，用于页面背景
$background-color: #f7f8fa;
// 浅色背景，用于卡片、弹窗等
$background-color-light: #ffffff;
// 深色背景，用于分割、强调区域
$background-color-dark: #f2f3f5;

/* ===== 边框颜色 ===== */
// 标准边框颜色
$border-color: #ebedf0;
// 浅色边框，用于分割线
$border-color-light: #f2f3f5;
// 深色边框，用于强调边框
$border-color-dark: #dcdee0;

/* ===== 字体大小 ===== */
// 迷你字体，用于极小的辅助文字
$font-size-mini: 10px;
// 小字体，用于辅助文字
$font-size-small: 12px;
// 正常字体，用于正文内容
$font-size-normal: 14px;
// 中等字体，用于小标题
$font-size-medium: 16px;
// 大字体，用于标题
$font-size-large: 18px;
// 超大字体，用于主标题
$font-size-xlarge: 20px;
// 特大字体，用于显著标题
$font-size-xxlarge: 24px;

/* ===== 字体粗细 ===== */
// 细体
$font-weight-light: 300;
// 常规
$font-weight-normal: 400;
// 中等粗体
$font-weight-medium: 500;
// 粗体
$font-weight-bold: 600;

/* ===== 圆角 ===== */
// 小圆角，用于按钮、小型元素
$border-radius-small: 4px;
// 中等圆角，用于卡片、面板
$border-radius-medium: 8px;
// 大圆角，用于弹窗、大型元素
$border-radius-large: 12px;
// 圆形，用于头像、图标按钮
$border-radius-circle: 50%;

/* ===== 间距 ===== */
// 迷你间距，用于紧凑元素内部
$spacing-mini: 4px;
// 小间距，用于相关元素之间
$spacing-small: 8px;
// 常规间距，用于一般元素之间
$spacing-normal: 12px;
// 中等间距，用于内容分组
$spacing-medium: 16px;
// 大间距，用于主要内容块之间
$spacing-large: 20px;
// 超大间距，用于主要区域之间
$spacing-xlarge: 24px;
// 特大间距，用于页面主要部分
$spacing-xxlarge: 32px;

/* ===== 阴影 ===== */
// 浅阴影，用于卡片、按钮等
$box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.05);
// 常规阴影，用于弹出层、悬浮元素
$box-shadow-normal: 0 2px 8px rgba(0, 0, 0, 0.1);
// 深阴影，用于模态框、重要弹窗
$box-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.15);

/* ===== 动画时间 ===== */
// 快速动画，用于微小的状态变化
$animation-duration-fast: 0.2s;
// 常规动画，用于一般的状态变化
$animation-duration-normal: 0.3s;
// 慢速动画，用于复杂或强调的变化
$animation-duration-slow: 0.4s;

/* ===== 渐变色 ===== */
// 主题渐变，用于主要按钮、强调区域
$gradient-primary: linear-gradient(to right, $primary-color, $primary-color-light);
// 成功渐变，用于成功状态
$gradient-success: linear-gradient(to right, #07c160, #10d878);
// 警告渐变，用于警告状态
$gradient-warning: linear-gradient(to right, #ff976a, #ffb57a);
// 危险渐变，用于危险状态
$gradient-danger: linear-gradient(to right, #ee0a24, #ff6b6b);

/* ===== z-index层级 ===== */
// 普通元素层级
$z-index-normal: 1;
// 弹出层层级
$z-index-popup: 1000;
// 遮罩层层级
$z-index-overlay: 1200;
// 模态框层级
$z-index-modal: 1300;
// 提示框层级
$z-index-toast: 1400;
// 加载层层级
$z-index-loading: 1500; 